<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平滚动菜单</title>
</head>
<body>
<div class="scrollmenu">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="#support">Support</a>
    <a href="#blog">Blog</a>
    <a href="#tools">Tools</a>
    <a href="#base">Base</a>
    <a href="#custom">Custom</a>
    <a href="#more">More</a>
    <a href="#logo">Logo</a>
    <a href="#friends">Friends</a>
    <a href="#partners">Partners</a>
    <a href="#people">People</a>
    <a href="#work">Work</a>
</div>

<h2>水平滚动菜单</h2>
<p>重置浏览器查看效果</p>
</body>
<style>
.scrollmenu{
    background-color: black;
    overflow: auto;
    white-space: nowrap;


}
    .scrollmenu a{
        color: white;
        padding: 30px;
        text-decoration: none;
        font-size: 30px;
        transition: 1s;
        display: inline-block;

    }
    .scrollmenu a:hover{
        background-color: gray;
    }
</style>
</html>
